<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现商品列</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            display: flex;
            flex-wrap: wrap;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        ul {
            width: 200px;
            height: 350px;
            margin: 10px;
            border: 1px dashed #000;
        }

        ul img {
            width: 100%;
            height: 55%;
        }

        h3 {
            font-size: 20px;
            line-height: 30px;
            color: #000;
            text-align: left;
        }

        li {
            font-size: 18px;
            line-height: 25px;
            color: #333;
            text-align: left;
        }

        li a {
            color: #666;
            margin-left: 20px;
        }

        li:nth-of-type(2) a {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <input id="pricebtn" type="button" value="根据价格排序">
    <input id="salesbtn" type="button" value="根据销量排序">
    <input id="evaluatebtn" type="button" value="根据评价排序">
    <div id="box"></div>

    <script>
        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }]
        // 根据价格排序
        pricebtn.onclick = function () {
            box.innerHTML = '';
            data.sort(function (a, b) {
                return b.price - a.price;
            })
            fn();
        }
        // 根据销量排序
        salesbtn.onclick = function () {
            box.innerHTML = '';
            data.sort(function (a, b) {
                return b.sales - a.sales;
            })
            fn();
        }
        // 根据评价排序
        evaluatebtn.onclick = function () {
            box.innerHTML = '';
            data.sort(function (a, b) {
                return b.evaluate - a.evaluate;
            })
            fn();
        }

        function fn() {
            // 循环data数组 把数据渲染到页面
            for (var i = 0; i < data.length; i++) {

                // 循环渲染结构
                box.innerHTML += '<ul>' +
                    '<a href="#"><img src="./' + data[i].imgurl + '" alt=""></a>' +
                    '<h3>' + data[i].name + '</h3>' +
                    '<li>' +
                    '颜色:' +
                    '<a href="#">' + data[i].color + '</a>' +
                    '</li>' +
                    '<li>' +
                    '原价:' +
                    '<a href="#">￥' + data[i].price + '</a>' +
                    '</li>' +
                    '<li>' +
                    '现价:' +
                    '<a href="#">￥' + data[i].sale + '</a>' +
                    '</li>' +
                    '<li>' +
                    '销量:' +
                    '<a href="#">' + data[i].sales + '</a>' +
                    '</li>' +
                    '<li>' +
                    '评价:' +
                    '<a href="#">' + data[i].evaluate + '</a>' +
                    '</li>'
                '</ul>'
            }
        }
        fn()
    </script>
</body>

</html>